<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="变更单信息" name="first">
                <el-descriptions column="2">
                    <el-descriptions-item
                        label="客户名称"
                        labelClassName="require-label"
                        >kooriookami</el-descriptions-item
                    >

                    <el-descriptions-item
                        label="变更类型"
                        labelClassName="require-label"
                        >18100000000</el-descriptions-item
                    >
                    <el-descriptions-item
                        label="联系人"
                        labelClassName="require-label"
                        >苏州市</el-descriptions-item
                    >
                    <el-descriptions-item
                        label="变更时间"
                        labelClassName="require-label"
                    >
                        2021-03-22
                    </el-descriptions-item>
                    <el-descriptions-item
                        label="变更模块"
                        labelClassName="require-label"
                        >江苏省苏州市吴中区吴中大道 1188
                        号</el-descriptions-item
                    >
                    <el-descriptions-item
                        label="客户影响"
                        labelClassName="require-label"
                    >
                        大
                    </el-descriptions-item>
                    <el-descriptions-item
                        label="操作风险等级"
                        labelClassName="require-label"
                    >
                        2021-03-22
                    </el-descriptions-item>
                    <el-descriptions-item
                        label="变更理由"
                        labelClassName="require-label"
                    >
                        2021-03-22
                    </el-descriptions-item>
                    <el-descriptions-item label="变更等级">
                        2021-03-22
                    </el-descriptions-item>
                    <el-descriptions-item
                        label="变更内容概述"
                        labelClassName="require-label"
                    >
                        2021-03-22
                    </el-descriptions-item>
                    <el-descriptions-item
                        label="变更描述"
                        labelClassName="require-label"
                    >
                        2021-03-22
                    </el-descriptions-item>
                </el-descriptions>
                <el-table
                    :data="tableData1"
                    border
                    style="width: 100%"
                    :header-cell-style="{
                        background: '#f5f5f5',
                        color: '#000',
                    }"
                >
                    <el-table-column prop="date" label="变更行为" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="变更影响" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="风险说明">
                    </el-table-column>
                </el-table>
                <el-row :gutter="40" style="margin-top: 20px">
                    <el-col :span="2">
                        <el-button type="primary">通过</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary">驳回</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary">升级审批</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary">已电话审批</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary">取消变更</el-button>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="附件管理" name="second">
                <el-table :data="tableData2" border style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="附件方案"
                        width="150"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="附件名称"
                        width="120"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="province"
                        label="附件格式"
                        width="120"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="city"
                        label="文件大小"
                        width="120"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="上传时间"
                        width="300"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="zip"
                        label="上传人员"
                        width="120"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column label="备注" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleCheck(scope.row)"
                                type="text"
                                size="small"
                                icon="el-icon-search"
                                >预览</el-button
                            >
                            <el-button
                                type="text"
                                size="small"
                                icon="el-icon-bottom"
                                >下载</el-button
                            >

                            <el-button
                                type="text"
                                size="small"
                                icon="el-icon-delete"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="变更日志" name="third">
                <el-table
                    :data="tableData3"
                    border
                    style="width: 100%"
                    :header-cell-style="{
                        background: '#f5f5f5',
                        color: '#000',
                    }"
                >
                    <el-table-column prop="date" label="变更操作" width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="变更操作时间"
                        width="180"
                    >
                    </el-table-column>
                    <el-table-column prop="address" label="处理人">
                    </el-table-column>
                    <el-table-column prop="remarks" label="操作备注">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: "first",
            tableData1: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄",
                },
            ],
            tableData2: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1518 弄",
                    zip: 200333,
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1517 弄",
                    zip: 200333,
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1519 弄",
                    zip: 200333,
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1516 弄",
                    zip: 200333,
                },
            ],
            tableData3: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                    remarks: "aaaa",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄",
                    remarks: "aaaa",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄",
                    remarks: "aaaa",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄",
                    remarks: "aaaa",
                },
            ],
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleCheck(current) {
            console.log(current);
        },
    },
};
</script>

<style>
.require-label::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
}
</style>